<template>
  <div>
    <el-tree
      ref="tree"
      node-key="id"
      :data="list"
      :props="{label:'name'}"
      default-expand-all
      :show-checkbox="true"
      :check-strictly="true"
    />
    <!-- all默认全部展开树形数据  show-显示小选框 check关闭父子关联 -->
    <el-button size="small" class="a" @click="quxiao">取消</el-button>
    <el-button size="small" type="primary" class="a" @click="baocun">确定</el-button>
  </div>
</template>
<script>
import { getPermissionList } from '@/api/permisson'
import { tranListToTreeData } from '@/utils/index'
import { getRoleDetail, assignPerm } from '@/api/setting'
export default {
  props: {
    id: { // 打开分配权限的id
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [] // 获取权限的基本数据

      //   arr: []// 获取权限点分配

    }
  },
  created() {
    this.loadPermissionList()
    this.loadPermissionByRoleId()// 获取具备权限的请求
  },
  methods: {
    quxiao() { // 关闭
      this.$emit('close')
    },
    async loadPermissionList() { // 获取分配权限的基本数据
      const res = await getPermissionList()
      console.log('获取到的数据', res)
      this.list = tranListToTreeData(res.data)
    },
    async loadPermissionByRoleId() { // 获取当前这个角色已经具备的权限
      const res = await getRoleDetail(this.id)
      console.log('获取的权限是', res)

      //   this.arr = res.data.permIds
      // 回填到树上
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },
    async hSave() {
      // 回填到树上
      const permIds = this.$refs.tree.getCheckedKeys()// 是树形组件上的一个方法可以获取到tree组件上的选框选中的情况
      console.log(permIds)
      const re = await assignPerm({
        id: this.id,
        permIds: permIds
      })
      console.log('保存角色的权限点的结果是', re)

      // 提示
      this.$message.success('保存角色的权限成功')
      // 关闭弹层
      this.quxiao()
    },
    baocun() {
      this.hSave()
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.a{
    margin-right: 100px;
    margin-left: 100px;
}
</style>
